<!DOCTYPE html>
<html >
<head>

		<style type="text/css">
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
	<style type="text/css">.row { width: 500px; display: inline-block; margin: 5px; }
.cell { width: 20%;  display:inline-block; }</style>
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script><script>var searchRecords;

require([
        'dojo/parser',
        'dojo/ready',
        'dojox/mvc/getStateful',
        'dijit/form/TextBox',
        'dijit/form/Button',
        'dojox/mvc/Group',
        'dojox/mvc/Output'
        ], function(parser, ready, getStateful){

        // Initial data
        var order = {
                "Serial" : "360324",
                "First" : "John",
                "Last" : "Doe",
                "Email" : "jdoe@example.com",
                "ShipTo" : {
                        "Street" : "123 Valley Rd",
                        "City" : "Katonah",
                        "State" : "NY",
                        "Zip" : "10536"
                },
                "BillTo" : {
                        "Street" : "17 Skyline Dr",
                        "City" : "Hawthorne",
                        "State" : "NY",
                        "Zip" : "10532"
                }
        };
                // The getStateful call will take json data and create make it Stateful
                model = getStateful(order);
                // the model created above is initialized with
                // model.First set to "John", model.Last set to "Doe" and model.Email set to "jdoe@example.com"

        });

        function setRef(id, model, attr) {
                require([
                         "dijit/registry",
                         "dojox/mvc/at"
                         ], function(registry, at){
                                                var widget = registry.byId(id);
                                                widget.set("target", model[attr]);
                                        });
        };</script>
</head>
<body class="claro">
    <script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<!--
        The group container denotes some logical grouping of widgets and also serves
        to establish a parent data binding context for its children.
        The target attribute for the outermost container obtains the binding from the
        "page scope" itself.
-->
<!--
        For convenience, the widget hierarchy matches the data hierarchy
        (see JSON literal above).
        In this implementation, the child attributes are simple property names
        of the parent binding context.
-->
<div class="row" id="addrGroup" data-dojo-type="dojox/mvc/Group"
                                        data-dojo-props="target: model.ShipTo">
        <div class="row">
                <label class="cell" for="streetInput">Street:</label>
                <input class="cell" id="streetInput" data-dojo-type="dijit/form/TextBox"
                        data-dojo-props="value: at('rel:', 'Street')">
        </div>
        <div class="row">
                <label class="cell" for="cityInput">City:</label>
                <input class="cell" id="cityInput" data-dojo-type="dijit/form/TextBox"
                        data-dojo-props="value: at('rel:', 'City')">
        </div>
        <div class="row">
                <label class="cell" for="stateInput">State:</label>
                <input class="cell" id="stateInput" data-dojo-type="dijit/form/TextBox"
                        data-dojo-props="value: at('rel:', 'State')">
        </div>
        <div class="row">
                <label class="cell" for="zipInput">Zipcode:</label>
                <input class="cell" id="zipInput" data-dojo-type="dijit/form/TextBox"
                        data-dojo-props="value: at('rel:', 'Zip')">
        </div>
</div>
<br/>
Choose:
<button id="shipto" type="button" data-dojo-type="dijit/form/Button"
                data-dojo-props="onClick: function(){setRef('addrGroup', model, 'ShipTo');}">Ship To</button>
<button id="billto" type="button" data-dojo-type="dijit/form/Button"
                data-dojo-props="onClick: function(){setRef('addrGroup', model, 'BillTo');}">Bill To</button>
<br/>
<br/>
</div></div>
</body>
</html>
